<template>
	<div>
		<p>获取一下当前路由的参数信息：{{$route.params.id}}</p>
		<ul>
			<li>{{messageDetail.id}}</li>
			<li>{{messageDetail.title}}</li>
			<li>{{messageDetail.content}}</li>
		</ul>
	</div>
</template>

<script>
	
	
	export default {
		data() {
			return {
				messageDetail:{} // 此处不用该定义为null，因为null.属性会报错
			}
		},
		mounted() {
			setTimeout(() => {
				
				// 局部变量
				const allMessageDetails = [
					{id:1, title:"滕王阁序", content:'豫章故郡，洪都新府。星分翼轸，地接衡庐。'},
					{id:2, title:"滕王阁序", content:'襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。'},
					{id:3, title:"滕王阁序", content:'雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；'},
					{id:4, title:"滕王阁序", content:'宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。'},
					{id:5, title:"滕王阁序", content:'腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；'},
					{id:6, title:"滕王阁序", content:'童子何知，躬逢胜饯。时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。'}
				];
				
				this.allMessageDetails = allMessageDetails;
				
				// 获取url中的参数id
				const id = this.$route.params.id * 1; // *1 转换一下id的数据类型
				
				// 根据url中的参数id，在数组中找出对应的数据显示出来
				this.messageDetail = this.allMessageDetails.find(detail => detail.id === id);
				
			}, 500);
		},
		
		// vue中mounted在声明周期中只会创建一次，而创建成功后，对象messageDetail在发生改变vue是不知道的，所以我们要监视messageDetail对象是否发生改变
		watch:{
			$route:function(value) {// 路由路径param发生了改变
				var id = value.params.id * 1;
				this.messageDetail = this.allMessageDetails.find(detail => detail.id === id);
			}
		}
	}
</script>

<style>
</style>
